<template>
  <section class="main" v-loading="resultObj.loading">
    <template v-if="locale == 'en'">
      <ProxyEn
        :data="resultObj.data"
        :limit="resultObj.limit"
        :page="resultObj.page"
        :total="resultObj.total"
        @page-change="onPageChange"
      />
    </template>
    <template v-else-if="locale == 'zh-cn'">
      <ProxyZhcn
        :data="resultObj.data"
        :limit="resultObj.limit"
        :page="resultObj.page"
        :total="resultObj.total"
        @page-change="onPageChange"
      />
    </template>
  </section>
</template>

<script lang="ts" setup name="HomePage">
  import { computed, onMounted } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { setLang } from '@/i18n';
  import { useI18n } from 'vue-i18n';
  import { proxyListApi } from '@/api/index';
  import type { FormInstance, FormRules } from 'element-plus';
  import ProxyEn from './components/proxy/en.vue';
  import ProxyZhcn from './components/proxy/zh-cn.vue';

  const { locale } = useI18n();

  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const resultObj = reactive({
    data: [],
    limit: 5,
    page: 1,
    total: 0,
    loading: false,
  });

  const getProxy = async () => {
    // if (resultObj.loading) return false;
    resultObj.loading = true;
    resultObj.data = [];
    proxyListApi({
      limit: resultObj.limit,
      page: resultObj.page,
    })
      .then((res) => {
        if (res.data) {
          resultObj.data = res.data.list;
          resultObj.total = res.data.count;
        }
        resultObj.loading = false;
      })
      .catch((err) => {
        console.log('err', err);
        resultObj.loading = false;
        ElMessage.error(err.message);
      });
  };

  const onPageChange = (val) => {
    resultObj.page = val;
    getProxy();
  };

  onMounted(() => {
    resultObj.page = 1;
    getProxy();
  });

  watch(
    () => locale.value,
    () => {
      resultObj.page = 1;
      getProxy();
    },
    { deep: true, immediate: true },
  );
</script>
<style lang="scss">
  .main {
    min-height: calc(100vh - 148px);
  }
</style>
